<template>
	<view>
		<view class="status_bar"></view>
		<view class="container">
			<swiper autoplay circular class="banner-wrapper" indicator-dots>
				<swiper-item v-for="(item,index) in material.album" :key="index" class="banner">
					<image :src="item" style="width: 100%;" class="banner-image" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<view style="margin-top: 0px;padding: 10px; border-radius: 20px;margin: 10px;border: 1px solid #eee;">
				<!-- <uni-search-bar style="padding: 10px 0;" @confirm="" @input="" ></uni-search-bar> -->

				<view style="display: flex; text-align: center;">
					<view style="flex: 1;" @click="selectTab(1)">
						<image style="width: 40px;height: 40px;" src="../../static/12.png"></image>
						<view>智能门禁</view>
					</view>
					<view style="flex: 1;" @click="selectTab(2)">
						<image style="width: 40px;height: 40px;" src="../../static/13.png"></image>
						<view>物业管家</view>
					</view>
					<view style="flex: 1;">
						<image style="width: 40px;height: 40px;" src="../../static/14.png"></image>
						<view>便捷生活</view>
					</view>
					<!-- <view style="flex: 1;" @click="jumpto('/pages/user/signin')"> -->
					<view style="flex: 1;" @click="jumpto('/pages/center/index')">
						<image style="width: 40px;height: 40px;" src="../../static/15.png"></image>
						<view>个人中心</view>
					</view>
				</view>
			</view>

			<!-- <view style="display: flex;border-bottom: 1px solid #eee;padding: 10px;margin: 10px;">
				<view style="font-size: 16px;font-weight: bold;flex: 1;">{{community_name}}</view>
			</view> -->

			<!-- <view v-show="selected_tab == 1" style="border-radius: 20px;margin: 10px;border: 1px solid #eee;padding: 10px;" title="自助开门" extra="额外信息">
				<view style="font-size: 16px;font-weight: bold;flex: 1;margin-bottom: 10px;">{{community_name}}</view>
				<view class="uni-padding-wrap uni-common-mt">
					<view class="uni-flex uni-row" style="display: flex;">
						<view class="flex-item" style="flex: 2;display: flex;border: 1px solid #ddd;border-radius: 10px;">
							<view :class="{active: is_ble_on}" style="text-align: center;flex: 1;padding-top: 6px;">
								<image style="width: 30px;height: 30px;" src="../../static/10.png"></image>
							</view>
							<view :class="{active: is_wifi_on}" style="text-align: center;flex: 1;padding-top: 6px;">
								<image style="width: 30px;height: 30px;" src="../../static/11.png"></image>
							</view>
						</view>
						<view class="flex-item " style="flex: 3;text-align: center;margin-left: 10px;margin-top: 6px;">
							<button size="mini" style="width: 100%;height: 36px;line-height: 40px;" type="primary"
								@click="opendoor()">立即开门</button>
						</view>
					</view>
				</view>
			</view> -->

			<view v-show="selected_tab == 1" style="border-radius: 20px;margin: 10px;">
				<view style="display: flex;border-bottom: 1px solid #eee;padding: 0 0 10px 0;margin-bottom: 10px;">
					<view style="font-size: 16px;font-weight: bold;flex: 1;">远程开门</view>
					<!-- <view @click="jumpto('/pages/index/list')" style="flex: 1;text-align: right;">更多入口 ></view> -->
				</view>
				<view class="wishes-wrapper">
					<view v-for="(item,index) in devices" class="wish create">
						<view class="wish-content" style='border-radius: 10px;'>
							<image style="margin-bottom: 5px;" @click="deviceInfo(item)" mode="widthFix"
								:src="item.cover[0]" />
							<view style="margin: 10px;">
								<view style="margin-bottom: 5px;">{{item.device_name}}</view>
								<view style="font-size: 12px;color:#18BC37;margin-bottom: 5px;">实时监控中</view>
								<button @click="postDeviceUnlock(item.device_id2)" size="mini" style="width: 100%;"
									type="primary">开门</button>
							</view>

							<!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
						</view>
					</view>
					<!-- <view class="wish create">
						<view class="wish-content" style='border-radius: 10px;'>
							<image @click="jumpto('/pages/index/detail')" mode="widthFix" src="../../static/logo.png" />
							<view style="margin-left: 10px;">健康xxxxx</view>
							<view style="font-size: 12px;color:#18BC37;margin-left: 10px;">实时监控中</view>
							<button @click="opendoor" size="mini" style="width: 90%;" type="primary">立即开门</button>
						</view>
					</view> -->
				</view>
			</view>

			<!-- <uni-card v-show="selected_tab == 2" style="" title="生活缴费" extra="小区"> -->
			<view v-show="selected_tab == 2" style="margin: 10px;" title="生活缴费" extra="小区">
				<view class="uni-form-item uni-column"
					style="margin-bottom: 10px; display: flex;border-radius: 10px;border: 1px solid #eee;padding: 10px;">
					<picker @change="examinationType" :range="monthArray">
						<!-- <label>月份--</label> -->
						<label class="">{{ now_month_label }}</label>
					</picker>
					<view style="margin: 0 10px;color: #ddd;">|</view>
					<picker @change="examinationType2" :range="billTypeArray">
						<!-- <label style="margin-left: 20px;">缴费--</label> -->
						<label class="">{{bill_type_label}}</label>
					</picker>
				</view>

				<view v-for="(item,index) in sel_life_bill_data" class="block">
					<view class="block-content">
						<view class="profile-detail">
							<view
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px">
								{{item.value}}
							</view>
							<view v-if="filter_bill_type == 1" class="profile-phone" style="font-size: 11px;">
								消耗水/立方
							</view>
							<view v-if="filter_bill_type == 2" class="profile-phone" style="font-size: 11px;">
								消耗电/度
							</view>
							<view v-if="filter_bill_type == 3" class="profile-phone" style="font-size: 11px;">
								管理面积/平分
							</view>
							<view v-if="filter_bill_type == 4" class="profile-phone" style="font-size: 11px;">
								车位量
							</view>
						</view>

						<view class="profile-detail">
							<view
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px">
								{{item.pay_price}}
							</view>

							<view class="profile-phone" style="font-size: 11px;">
								费用
							</view>
						</view>

						<view class="profile-detail">
							<view v-if="item.pay_status == 0"
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px; white-space: nowrap;">
								未支付</view>
							<view v-if="item.pay_status == 10"
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px; white-space: nowrap;">
								已支付</view>
							<view v-if="item.pay_status == -1"
								style="text-align: center;font-size: 18px;font-weight: bold;color: #18BC37;margin-bottom: 10px; white-space: nowrap;">
								未出账</view>
							<view class="profile-phone" style="font-size: 11px;">
								水费缴费状态
							</view>
						</view>
					</view>
				</view>

				<view class="block" style="margin-top: 10px;">
					<button style="width: 100%;" type="primary" @click="logout">立即支付</button>
				</view>
				
				<view style="margin-top: 30px;font-size: 14px;color: gray;text-align: center;">
					<text @click="showmo()">联系客服</text>
					<text style="margin: 0 10px;">|</text>
					<text @click="jumpto('/pages/attestation/create')">留言反馈</text>
				</view>
			</view>


			<uni-popup ref="popup" type="center" :animation="false">
				<uni-popup-dialog mode="input" message="尊敬的业主:" :duration="2000" :before-close="true" @close="close"
					@confirm="confirmCommunity">
					<view style="background-color: #fff;width: 100%;padding: 10px;">
						<view v-if="devices.length > 0" style="color: gray;font-size: 12px;">系统正在为您开启
							{{devices[0].device_name}}，是否确认开启
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
			
			
			<uni-popup ref="popup1" type="center" :animation="false">
				
				<view style="line-height: 50px;padding: 10px;background-color: #fff;border-radius: 10px;">
					<view>温馨提示</view>
					{{unpay_bill_text}}
				</view>
				
			</uni-popup>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				material: {
					album: [
						// 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
						// 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
						// '../../static/banner.png',
						// '../../static/banner.png',
					]
				},


				community_name: '',
				selected_tab: 1,
				is_ble_on: false,
				is_wifi_on: false,
				ble_code: 10000,
				interval_id: null,


				monthArray: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月',
					'12月'
				],
				now_month_label: '',

				billTypeArray: [
					'水费', '电费', '管理费', '停车费'
				],
				bill_type_label: '水费',


				devices: [],
				life_bill_data: [],
				sel_life_bill_data: [],

				filter_month: 1,
				filter_bill_type: 1,
				
				app_version: 1.00,
				
				unpay_bill_text: '',
			}
		},
		onLoad() {
			this.getBanner();
		},
		onShow() {
			if (!uni.getStorageSync("is_login") || !uni.getStorageSync("uid")) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.hideToast();
					uni.redirectTo({
						url: '/pages/user/signin'
					});
				}, 1000);
				return;
			}
			this.community_name = uni.getStorageSync('community_name');
			this.init();
			this.getUserDevice();
			this.init2();
			this.getLifeBill();
			this.checkVersion();
			this.getUnpayBill();
		},
		methods: {
			getUnpayBill() {
				let that = this;
				that.$api.getUnpayBill({
					uid: uni.getStorageSync('uid'),
				}).then(res => {
					if (res.data != null) {
						that.unpay_bill_text = res.data;
						this.$refs.popup1.open()
					}
				})
			},
			checkVersion() {
				let _this = this;
				// let local_version = uni.getStorageSync('local_version', 1.00);
				uni.getSystemInfo({
					success: (res) => {
						console.log(res.platform);
						//检测当前平台，如果是安卓则启动安卓更新  
						if (res.platform == "android") {
							_this.$api.getLastVersion({
								v: local_version
							}).then(res => {
								if (res.data != null) {
									if (_this.app_version < res.data.version) {
										if (plus.networkinfo.getCurrentType() != 3) {
											uni.showToast({
												title: '有新的版本发布，检测到您目前非Wifi连接，为节约您的流量，程序已停止自动更新，将在您连接WIFI之后重新检测更新。',
												mask: false,
												duration: 5000,
												icon: "none"
											});
											return;
										}
										uni.showToast({
											title: '有新的版本发布，检测到您目前为Wifi连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序。',
											mask: false,
											duration: 5000,
											icon: "none"
										});
										var dtask = plus.downloader.createDownload(res.data.download_url, {}, function ( d, status ) {
											if ( status == 200 ) {
												plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename),{},{},function(error){
													uni.showToast({
														title: '安装失败',
														mask: false,
														duration: 1500
													});
												})
											} else {
												 uni.showToast({  
													title: '更新失败',  
													mask: false,  
													duration: 1500  
												 });
											}
										});
										dtask.start();
									}
								}
							})
						}
					}
				})
			},
			getBanner() {
				let that = this;
				that.$api.getMaterial({
					type: 3,
				}).then(res => {
					that.material.album = res.data.album;
				})
			},
			getLifeBill() {
				let that = this;
				that.$api.getLifeBill({
					uid: uni.getStorageSync('uid'),
				}).then(res => {
					that.life_bill_data = res.data;
					that.filterBill();
				})
			},
			init2() {
				var date = new Date();
				var nowMonth = date.getMonth();
				this.filter_month = nowMonth + 1;
				this.now_month_label = this.monthArray[nowMonth];
			},
			getUserDevice() {
				let that = this;
				let proprietor_id = uni.getStorageSync('proprietor_id');

				this.$api.getUserDevice({
					proprietor_id: proprietor_id
				}).then(res => {
					that.devices = res.data;
				})
			},
			postDeviceUnlock(device_id2) {
				let that = this;
				let proprietor_id = uni.getStorageSync('proprietor_id');
				let uid = uni.getStorageSync('uid');
				uni.showModal({
					title: '是否确认操作',
					success: function(res) {
						if (res.confirm) {

							that.$api.postDeviceUnlock({
								uid: uid,
								proprietor_id: proprietor_id,
								device_id2: device_id2
							}).then(res => {
								if (res.meta.code == '000') {
									uni.showToast({
										title: res.meta.msg,
										duration: 2000,
										icon: 'none',
									})
								}

							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '1865222356',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
			opendoor() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirmCommunity() {
				this.$refs.popup.close()
			},
			deviceInfo(item) {
				uni.setStorageSync('tmp_device_id', item.device_id)
				uni.setStorageSync('tmp_device_id2', item.device_id2)
				uni.navigateTo({
					url: '/pages/index/detail'
				})
			},
			init() {
				clearInterval(this.interval_id);
				let that = this;
				uni.getNetworkType({
					success: function(res) {
						if (res.networkType == 'wifi' ||
							res.networkType == '2g' ||
							res.networkType == '3g' ||
							res.networkType == '4g' ||
							res.networkType == '5g' ||
							res.networkType == 'ethernet'
						) {
							that.is_wifi_on = true;
						}
					}
				});
				uni.onNetworkStatusChange(function(res) {
					if (res.networkType == 'wifi' ||
						res.networkType == '2g' ||
						res.networkType == '3g' ||
						res.networkType == '4g' ||
						res.networkType == '5g' ||
						res.networkType == 'ethernet' ||
						res.isConnected
					) {
						that.is_wifi_on = true;
					} else {
						that.is_wifi_on = false;
					}
				});
				uni.openBluetoothAdapter({
					success(res) {
						if (res.errMsg == 'openBluetoothAdapter:ok') {
							that.ble_code = 0;
							that.is_ble_on = true;
						}
						console.log(res)
					},
					fail(e) {
						// that.ble_code = e.code;
						console.log(e)
					},
					complete(e) {
						console.log('ble check complete')
					}
				});
				// setInterval(function() {
				// 	uni.onBluetoothAdapterStateChange(function (res) {
				// 		that.is_ble_on = res.available;
				// 		console.log('adapterState changed, now is', res)
				// 	})
				// }, 1000)


			},
			jumpto(url) {
				clearInterval(this.interval_id)
				uni.navigateTo({
					url: url
				})
			},
			selectTab(i) {
				this.selected_tab = i;
			},
			examinationType(e) {
				this.now_month_label = this.monthArray[e.detail.value];
				this.filter_month = e.detail.value + 1;
				this.filterBill();
			},
			examinationType2(e) {
				this.bill_type_label = this.billTypeArray[e.detail.value];
				if (this.bill_type_label == '水费') {
					this.filter_bill_type = 1;
				}
				if (this.bill_type_label == '电费') {
					this.filter_bill_type = 2;
				}
				if (this.bill_type_label == '物业费') {
					this.filter_bill_type = 3;
				}
				if (this.bill_type_label == '停车费') {
					this.filter_bill_type = 4;
				}

				this.filterBill();
			},
			filterBill() {
				let that = this;
				that.sel_life_bill_data = [];
				this.life_bill_data.forEach((item, i) => {
					if (item.month == that.filter_month && item.type == that.filter_bill_type) {
						that.sel_life_bill_data.push(item);
					}
				})
				if (this.sel_life_bill_data.length == 0) {
					this.sel_life_bill_data.push({
						value: 0,
						pay_price: 0.00,
						pay_status: -1
					})
				}
			},


		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.active {
		background-color: #85C1E9;
		border-radius: 10px;
	}

	.wishes-wrapper {

		// margin-right: -5px;
		.wish {
			width: 49%;
			text-align: center;
			vertical-align: top;
			background: #fff;
			border-radius: 10px;
			width: rpx(349);
			display: inline-block;
			margin-right: 5px;
			font-size: 14px;
			margin: 0 0 10px 0;

			&.create {
				min-height: 227.8px;

				.wish-content {
					display: flex;
					flex-direction: column;
					border-radius: 10px 10px 0 0;
					border: 1px solid #eee;
					// padding-bottom: 10px;
					text-align: left;

					image {
						height: 140px;
						width: 100%;
					}
				}
			}
		}

		.wish:nth-child(even) {
			vertical-align: top;
			background: #fff;
			border-radius: 10px;
			width: rpx(349);
			display: inline-block;
			font-size: 14px;
			float: right;
			margin: 0 0 10px 0;

			&.create {
				min-height: 227.8px;

				.wish-content {
					display: flex;
					flex-direction: column;
					border-radius: 10px 10px 0 0;
					border: 1px solid #eee;
					padding-bottom: 10px;
					text-align: left;

					image {
						height: 140px;
						width: 100%;
					}
				}
			}
		}
	}

	.block {
		// margin: 15px;
		background: #fff;
		border-radius: 5px;


		.block-title {
			font-size: 18px;
			padding: 15px;
			font-weight: bold;

			.block-sub-title {
				font-size: 16px;
				font-weight: normal;
				float: right;
				color: rgb(153, 153, 153);
			}

		}

		.block-desc {
			color: rgb(153, 153, 153);
			padding: 0 15px;
			border-bottom: 1px solid rgb(153, 153, 153);
			margin: 0 15px;

		}

		.block-content {
			// padding: 15px 0 15px 15px;
			display: flex;
			align-items: center;
			border: 1px solid #eee;
			padding: 10px;
			border-radius: 10px;

			&>span {
				min-width: 15%;
				height: 36px;
				margin-right: 15px;
				line-height: 36px;
			}

			&>view,
			&>uni-switch {
				//margin-left: auto;
			}

			/deep/ {
				.checklist-group {
					justify-content: center;
				}
			}

			&>.character-avatar {
				margin-left: 0;
				margin-right: 5px;

				&>image {
					height: rpx(150);
					width: rpx(150);


					.character-image {
						height: rpx(160);
						width: rpx(160);

						border-radius: 50%;

					}

					border-radius: 10px;
				}
			}
		}
	}

	.profile-detail {
		flex: 1;
		padding: 0 10px;
		display: flex;
		flex-direction: column;
	}

	.profile-phone {
		// margin-top: 10px;
		text-align: center;
		white-space: nowrap;
	}
</style>
